<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>个人简介</h1>
<table border="1px">
    <tr>
        <th>照片:</th>
        <th>姓名:</th>
        <th>年龄:</th>
        <th>好友:</th>
    </tr>
</table>
</body>
<script>
    let person = {
        name: '传奇哥',
        age: 18,
        friends: ['路飞', '索隆', '娜美', '张飞'],
        imgUrl: 'img/1.jpg'
    };

    let table = document.querySelector('table');
    let tr = document.createElement('tr');

    let imgTd = document.createElement('td');
    imgTd.textContent = '无'; // 如果有图片链接，这里可以添加一个 img 标签显示图片
    // imgTd.innerHTML = '<img src="' + person.imgUrl + '" alt="传奇哥">';

    let nameTd = document.createElement('td');
    nameTd.textContent = person.name;

    let ageTd = document.createElement('td');
    ageTd.textContent = person.age;

    let friendsTd = document.createElement('td');
    friendsTd.textContent = person.friends.join(', ');

    tr.append(imgTd, nameTd, ageTd, friendsTd)
    table.appendChild(tr)
</script>
</html>
